<!--
 * @Author: ailin
 * @Date: 2022-12-08 17:22:25
 * @LastEditors: ailin
 * @LastEditTime: 2023-07-31 15:30:01
 * @Description: file content
 * @FilePath: /pay_platform/src/views/ule/setPay/setPayWord.vue
-->
<template>
  <div class="container">
    <img class="status_icon" src="@/assets/images/icon_successful.png" alt="" />
    <p class="status_text">支付密码已升级</p>
    <p class="status_tips">下单可以使用新密码啦</p>
    <div class="recond_con">
      <p class="open_record_text">推荐开通{{ data.params && data.params.isFingerPrinter == "true" ? "指纹" : "面容" }}支付</p>
      <img
        v-if="data.params && data.params.isFingerPrinter == 'true'"
        class="pay_icon"
        src="@/assets/images/icon_fingerprint.png"
        alt=""
      />
      <img v-else class="pay_icon" src="@/assets/images/icon_faceID.png" alt="" />
      <div class="pay_tips">快捷又方便 安全有保障</div>
      <div
        class="open_btn active"
        :data-stat="`立即开通_${data.params && data.params.isFingerPrinter == 'true' ? '指纹支付' : '面容支付'}`"
        @click="data.openPay"
      >
        立即开通
      </div>
      <div
        class="open_text active"
        :data-stat="`暂不开启_${data.params && data.params.isFingerPrinter == 'true' ? '指纹支付' : '面容支付'}`"
        @click="data.dontOpen"
      >
        暂不开启
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, reactive } from "vue"
import { useRoute, useRouter } from "vue-router"
import { loadScript, changeSearch } from "@/assets/js/common.js"
import { getMobileNum } from "@/assets/js/api/api.js"
import { showToast } from "vant"
const route = useRoute()
const router = useRouter()
let data = reactive({
  params: null,
  openPay: () => {
    router.push(`/validPassword${changeSearch(data.params)}`)
  },
  dontOpen: () => {
    loadScript("//i2.ulecdn.com/ulewap/j/cashierDesk/dsbridge.js", (res) => {
      //向收银台页面发送消息，通知收银台用户暂不开通生物支付并关闭当前webview
      try {
        dsBridge.call("generalAction", {
          type: "6",
          ios_action: JSON.stringify({
            functionName: "NotifyTestPay",
            functionParams: "noOpenTimes"
          }),
          android_action: JSON.stringify({
            functionName: "NotifyTestPay",
            functionParams: "noOpenTimes"
          }),
          needlogin: "false",
          logTitle: ""
        })
        data.setLocalStorage("dontOpenPay", "1") //设置暂不开启状态缓存
        dsBridge.call("generalAction", { type: "0", ios_action: "ulePopView", android_action: "ulePopView" })
      } catch (err) {
        console.log(err)
      }
    })
  },
  setLocalStorage: (key, value) => {
    let curtime = new Date().getTime() // 获取当前时间 ，转换成JSON字符串序列
    let valueDate = JSON.stringify({
      val: value,
      timer: curtime,
      mobile: data.phoneNumber
    })
    console.log("090909090进入存储缓存方法", { page_key: key, page_value: valueDate })
    dsBridge.call("setH5PageStatus", { page_key: key, page_value: valueDate })
  },
  getMobileNum: () => {
    getMobileNum({}, "", "jsonCallback").then((res) => {
      if (res.code == "0000") {
        data.phoneNumber = res.data
      } else {
        showToast(res.msg)
      }
    })
  }
})
onMounted(() => {
  // document.title="支付密码设置完成";
  data.params = route.query
  if (!data.phoneNumber) {
    data.getMobileNum()
  }
})
</script>
<style lang="scss" scoped>
.container {
  .status_icon {
    display: block;
    margin: 64px auto 0;
    width: 226px;
    height: 220px;
  }

  .status_text {
    position: relative;
    z-index: 1;
    margin-top: -20px;
    font-size: 32px;
    text-align: center;
    color: #333;
    line-height: 45px;
  }

  .status_tips {
    margin-top: 4px;
    font-size: 26px;
    text-align: center;
    color: #999;
    line-height: 37px;
  }

  .recond_con {
    padding-top: 98px;
    margin-top: 97px;
    width: 100%;
    height: 995px;
    background: url("@/assets/images/bg_biological.png") no-repeat;
    background-size: 100% 100%;

    .open_record_text {
      font-size: 34px;
      font-family: PingFangSC-Medium, "PingFang SC";
      text-align: center;
      color: #ff740b;
      font-weight: 500;
      line-height: 48px;
    }

    .pay_icon {
      display: block;
      margin: 64px auto 0;
      width: 168px;
      height: 168px;
    }

    .pay_tips {
      display: block;
      margin: 32px auto 0;
      width: 380px;
      height: 86px;
      font-size: 26px;
      font-family: PingFangSC-Regular, "PingFang SC";
      text-align: center;
      color: #ff740b;
      background: url("@/assets/images/icon_tips.png") no-repeat;
      background-size: 100% 100%;
      line-height: 86px;
      font-weight: 400;
    }

    .open_btn {
      margin: 117px auto 0;
      width: 450px;
      height: 90px;
      font-size: 32px;
      font-family: PingFangSC-Medium, "PingFang SC";
      text-align: center;
      color: #fff;
      background: #ee1919;
      border-radius: 54px;
      font-weight: 500;
      line-height: 90px;
    }

    .open_text {
      margin-top: 42px;
      font-size: 28px;
      font-family: PingFangSC-Regular, "PingFang SC";
      text-align: center;
      color: #999;
      font-weight: 400;
      line-height: 40px;
    }

    .active:active {
      opacity: 0.9;
    }
  }
}
</style>
